<template>
    <div class="home-index">
        <section class="home-index.tools">
            <div>
                <Breadcrumb></Breadcrumb>
                <el-popover
                    placement="bottom-start"
                    width="600"
                    trigger="click">
                <el-button size="mini" round  slot="reference" icon="el-icon-thumb">筛选项</el-button>
            </el-popover>
            </div>
            <div>
                <el-button size="mini" type="primary" icon="el-icon-circle-plus-outline">新增</el-button>
                <el-button size="mini" icon="el-icon-download">导出</el-button>
            </div>  
        </section>
        <section 
            class="table-box"  
            v-loading="loading"
			element-loading-text="拼命加载中"
			element-loading-spinner="el-icon-loading">
            <el-table 
                :data="tableData"
                :header-cell-class-name="tableHeaderClassName" 
                :row-style="tableRowClassStyle"
                 fit style="width: 100%;">
                  <el-table-column label="客户名称"  prop="name" align="center"></el-table-column>
                  <el-table-column label="客户地址"  prop="address" align="center"></el-table-column>
                  <el-table-column label="客户电话"  prop="phone" align="center"></el-table-column>
                  <el-table-column label="客户性别"  prop="sex" align="center"></el-table-column>
                  <el-table-column label="客户名称"  prop="name" align="center"></el-table-column>
                  <el-table-column label="操作" fixed="right" align="center" width="180">
                    <template slot-scope="scope">
                        <el-button @click.stop="handleUpdate(scope.row)" type="text" size="small" icon="el-icon-edit">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-cls">
                <el-pagination 
                    @size-change="handleSizeChange" 
                    @current-change="handleCurrentChange" 
                    :current-page="currentPage" 
                    :page-sizes="[10, 20, 30, 50, 100]" 
                    :page-size="listQuery.limit" 
                    :total="total" 
                    :pager-count="5"
                    background 
                    layout="total, sizes, prev, pager, next, jumper">
                </el-pagination>
            </div>

        </section>
    </div>
</template>

<script>
import Breadcrumb from "@/components/breadcrumb";
import { handleSizeChangeMixin, tableMixin } from "utils/mixins";
export default {
    mixins: [handleSizeChangeMixin, tableMixin],
    components:{
        Breadcrumb
    },
    data(){
        return{
            loading:false,
            total:10,
            currentPage:1,
            listQuery:{
                limit: 10,
                page: 1,
            },
            tableData:[
                {name:'123',address:'测试地址',phone:'测试手机',sex:'男'},
                {name:'123',address:'测试地址',phone:'测试手机',sex:'男'},
                {name:'123',address:'测试地址',phone:'测试手机',sex:'男'},
                {name:'123',address:'测试地址',phone:'测试手机',sex:'男'}
            ],
        }
    },
    methods: {
        handleUpdate(){

        }
    }
}
</script>

<style lang="scss" scoped>
@include component(home-index){
    width: 100%;
    > section {
        width: 100%;
        margin-bottom: 5px;
        border: solid .5px #dfdfdf;
    }
    @include part(tools){
        height: $tools_height;
        background: #fff;
        padding: 10px 20px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        > div {
           display: flex;
           align-items: center;
        }
        .el-button {
            margin: 0 5px;
        }
        
    }
}
</style>
